<template>
  <!--  右侧内容-->
  <div class="cmodify">
    <h3 class="cal_mall_tit"><img style="width: 20px;height: 26px;" src="~/assets/img/cmodify_zhaq.png">账号信息</h3>
    <div class="cmodify_main">
      <div class="cmodify_main_content">
        <div class="ct">
          <div class="div1 div">
            <p class="cmodify_top af"><span>基本信息</span></p>
          </div>
          <div style="padding-left: 75px;padding-right: 9px;">
            <div id="tx" class="div div2">
              <p class="p1 af p2"><span>用户头像</span> <img :src="'https://exam.zhonghaiqihang.com/'+title.gr.avatar"
                  width="60" height="60" class="tx"></p>
              <div class="ycd af"><img src="https://exam.zhonghaiqihang.com//Public/image/photo.jpg" width="180px"
                  height="180px">
                <div class="rt"><input type="file" style="display:none;"> <a href="javascript:;">修改头像</a>
                  <p class="javascript:;">头像尺寸180*180</p>
                </div>
              </div>
            </div>
            <div class="div">
              <p class="p1 af"><span>用户名</span><strong>{{title.gr.username}}</strong></p>
            </div>
            <div class="div">
              <p class="p1 af"><span>用户账号</span> <strong>{{title.gr.name}}</strong></p>
            </div>
            <div class="div">
              <p class="p1 af"><span>注册时间</span> <strong>{{title.gr.createtime}}</strong></p>
            </div>
            <div id="mm" class="div">
              <p class="p1 af"><span>密码</span><strong class="">******</strong> <a @click="mmboolear==true?mmboolear=false:mmboolear=true"
                  href="javascript:;" class="bj" :class="mmboolear==false?'':'select'">{{mmboolear==false?'编辑':'收起'}}<i></i></a></p>
              <div class="ycd ycd2 xx" :class="mmboolear==false?'':'select'">
                <p class="m1"><span>设置密码 : </span><input type="password" id="mima1"></p>
                <p class="m2"><span>确认密码 : </span><input type="password" id="mima2"></p>
                <a href="javascript:;" class="bc" @click="xgmm">保存</a>
              </div>
            </div>
            <div class="div" id="sjhm">
              <p class="p1 af"><span>手机号码</span><strong>{{title.gr.mobile}}</strong> <strong style="margin-left: 30px">{{title.gr.mobileone}}</strong>
                <strong style="margin-left: 30px">{{title.gr.mobiletwo}}</strong>
                <a @click="sjhboolear==true?sjhboolear=false:sjhboolear=true" href="javascript:;" class="bj" :class="sjhboolear==false?'':'select'">{{sjhboolear==false?'编辑':'收起'}}<i></i></a></p>
              <div class="ycd ycd3 xx" :class="sjhboolear==false?'':'select'">
                <p class="sj"><span>手机号 : </span><input type="text" id="sjh1" :value="title.gr.mobile?title.gr.mobile:''"><span>手机号
                    : </span><input type="text" id="sjh2" :value="title.gr.mobileone?title.gr.mobileone:''"><span>手机号 :
                  </span><input type="text" id="sjh3" :value="title.gr.mobiletwo?title.gr.mobiletwo:''"></p>
                <a href="javascript:;" class="bc" @click="xgsj">保存</a>
              </div>
            </div>
            <div class="div" id="dzyx2">
              <p class="p1 af"><span>电子邮箱</span><strong>{{title.gr.email?title.gr.email:'未添加邮箱'}}</strong>
              <a @click="emailboolear==true?emailboolear=false:emailboolear=true" href="javascript:;" class="bj" :class="emailboolear==false?'':'select'">{{emailboolear==false?'编辑':'收起'}}<i></i></a></p>
              <div class="ycd ycd4 xx" :class="emailboolear==false?'':'select'">
                <p class="sj"><span>添加邮箱 : </span><input type="email" id="dzyx" :value="title.gr.email?title.gr.email:''"></p>
                <a href="javascript:;" class="bc" @click="xgyx">保存</a>
              </div>
            </div>
            <div class="div" id="sfzh2">
              <p class="p1 af"><span>身份证号</span><strong>{{title.gr.idcard?title.gr.idcard:'未添加身份证号'}}</strong>
              <a @click="sfzboolear==true?sfzboolear=false:sfzboolear=true" href="javascript:;" class="bj" :class="sfzboolear==false?'':'select'">{{sfzboolear==false?'编辑':'收起'}}<i></i></a></p>
              <div class="ycd ycd5 xx" :class="sfzboolear==false?'':'select'">
                <p class="sj"><span>身份证号 : </span><input type="text" id="sfzh" :value="title.gr.idcard?title.gr.idcard:''"></p>
                <a href="javascript:;" class="bc" @click="xgsfz">保存</a>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="tc">
      <span>×</span>
      {{tcmsg}}
    </div>
  </div>
  <!-- 右侧内容 -->
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    props: ['foobar'],
    data() {
      return {
        grzx: {
          bj: '编辑'
        },
        title: {
          gr: {}
        },
        dzyx: '',
        sfzh: '',
        mima: '',
        mima1: '',
        mima2: '',
        sj1: '',
        sj2: '',
        sj3: '',
        select: 1,
        tcmsg: '',
        mmboolear: false,
        sjhboolear: false,
        emailboolear: false,
        sfzboolear: false
      }
    },
    async asyncData({
      req,
      params
    }) {
      let a = req.headers.cookie;
      let cookie = '';
      if (a.indexOf('userinfoRes') != -1) {
        let b = a.split('userinfoRes=');
        let c = b[1].split(';');
        cookie = c[0];
      }
      let gr = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/userCenterIndexData?userid=` +
        cookie)
      let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
      let nh2 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/editUserInfoIndexData?userid=` +
        cookie);

      let data = {
        nav: nh.data,
        id: cookie,
        gr: gr.data,
        xggr: nh2.data
      };
      return {
        title: data
      }
    },
    mounted: function() {
      if (this.title.gr == 'go_signin') {
        this.$router.push('/Login');
        setCookie('userinfoRes', '', -1);
      } else if (this.title.gr == 'userid_error') {
        this.$router.push('/Login');
        setCookie('userinfoRes', '', -1);
      } else if (this.title.gr == 'userinfo_is_null') {
        this.$router.push('/Login');
        setCookie('userinfoRes', '', -1);
      } else if (this.title.gr == 'userinfo_banuse') {
        this.$router.push('/Login');
        setCookie('userinfoRes', '', -1);
      } else if (this.title.gr == 'serviceid_is_null') {
        window.open('/Modify', _self);
      } else if (this.title.gr == 'serviceid_error') {
        window.open('/Modify', _self);
      } else if (this.title.gr == 'serviceinfo_is_null') {
        window.open('/Modify', _self);
      } else if (this.title.gr == 'serviceinfo_banuse') {
        window.open('/Modify', _self);
      }

    },
    methods: {
      xgyx: function() {
        var _this = this;
        var yx = $('#dzyx').val();
        let lj = 'userid=' + this.title.id + '&email=' + yx;
        _this.$axios.post('/api' + 'PInterface/UserCenter/editEmailOperation', lj)
          .then(function(response) {
            _this.tcmsg = response.data;
            $('.tc').addClass('select');

            window.open('/cPersonalCenter/cModify', '_self');

          });
      },
      xgsfz: function() {
        var _this = this;
        var sfz = $('#sfzh').val();
        let lj = 'userid=' + this.title.id + '&idcard=' + sfz;
        if (sfz.length == 18) {
          _this.$axios.post('/api' + 'PInterface/UserCenter/editIdcardOperation', lj)
            .then(function(response) {
              _this.tcmsg = response.data;
              $('.tc').addClass('select');
              window.open('/cPersonalCenter/cModify', '_self')
            });
        } else {
          _this.tcmsg = '身份证格式不正确';
          $('.tc').addClass('select');
          $('.tc').fadeIn(0);
          $('.tc').fadeOut(2500);
        }

      },
      xgsj: function() {
        var _this = this;
        var sj1 = $('#sjh1').val();
        var sj2 = $('#sjh2').val();
        var sj3 = $('#sjh3').val();

        let lj = 'userid=' + this.title.id + '&mobile=' + sj1 + '&mobileone=' + sj2 + '&mobiletwo=' + sj3;
        _this.$axios.post('/api' + 'PInterface/UserCenter/editMobileOperation', lj)
          .then(function(response) {
            _this.tcmsg = response.data;
            $('.tc').addClass('select');

            _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/editUserInfoIndexData?userid=' +
                _this.title.id)
              .then(function(response) {});
            window.open('/cPersonalCenter/cModify', '_self')

          });

      },
      xgmm: function() {
        var _this = this;
        var mima1 = $('#mima1').val();
        var mima2 = $('#mima2').val();
        let lj = 'userid=' + this.title.id + '&onepassword=' + mima1 + '&twopassword=' + mima2;
        _this.$axios.post('/api' + 'PInterface/UserCenter/editPasswordOperation', lj)
          .then(function(response) {
            _this.tcmsg = response.data;
            console.log(_this.tcmsg)
            $('.tc').addClass('select');
            $('.tc').fadeIn(0);
            $('.tc').fadeOut(2000);
            window.open('/cPersonalCenter/cModify', '_self')

          });
      }
    }
  }
</script>

<style scoped="scoped">
  .tc {
    position: fixed;
    display: none;
    padding: 0 10px;
    min-width: 280px;
    height: 180px;
    line-height: 180px;
    color: white;
    text-align: center;
    top: 50%;
    left: 50%;
    z-index: 1000;
    margin-top: -90px;
    margin-left: -140px;
    background: rgba(0, 0, 0, .6);
    font-size: 18px;
    border-radius: 8px;
  }

  .tc.select {
    display: block;
  }

  .tc span {
    display: block;
    position: absolute;
    top: 8px;
    line-height: 28px;
    right: 10px;
    font-size: 28px;
    color: white;
  }
</style>
